iT邦幫忙

2023 iThome 鐵人賽
DAY 12
0
Modern Web

Google Apps Script 整合運用系列 第 12 篇

Bootstrap Table(二)

15th鐵人賽
1091 瀏覽

  • 分享至 

  • xImage
    •  

調用Bootstrap-table

  1. 上個單元，是使用它的啟始模版，在 table 設定 「data-toggle="table"」屬性，即可調用
  2. 本單元則是從 js來調用 $("#table").bootstrapTable({})
  3. 首先在 table 設定 id='table'
  4. th屬性

  <thead>
    <tr>
      <? for(let i in stru){ ?>
        <th
          data-field='<?= stru[i]['title']?>'
          data-sortable='true'
          data-align='left'
          data-width=''
          data-visible='true'        
        >
          <?= stru[i]['title']?>
        </th>
      <? } ?>
      
      <th 
        data-field='operate' 
        data-sortable='false' 
        data-align='center' 
        data-width='150'
        data-clickToSelect='false' 
        data-events='window.operateEvents' 
        data-formatter='operateFormatter'>
        <a href="<?= global['url'] ?>?op=form_custom" class="" title='新增'>
          <i class="bi bi-file-earmark-plus"></i>
        </a>
      </th>
    </tr>
  </thead>

函式屬性，可以放在 html中，例 data-field 如果放在 js 則用 field
data-field：欄位名稱
data-sortable：是否排序 true false
data-align：水平對齊 left center right
data-width：欄位寬度，單位 px
data-visible：欄位是否出現
data-events：按鈕事件，調用的 windows.xxx =>必在 放在「$("#table").bootstrapTable({})」前面
data-formatter：按鈕


  window.operateEvents = {
    'click .show': function (e, value, row, index) {//顯示單筆
      alert('查詢');//         
    },
    'click .edit': function (e, value, row, index) {
      top.location.href='<?= global.url ?>?op=form_custom&&sn='+row[0]
    },
    'click .delete': function (e, value, row, index) {
      alert('刪除');      
    }
  } 

  function operateFormatter(value, row, index) {
    console.log(row)
    return [
      '<a class="show me-2" href="javascript:void(0)" title="查詢" target="_self">',
      '<i class="bi bi-search"></i>',
      '</a>',
      '<a class="edit me-2" href="javascript:void(0)" title="編輯" target="_self">',
      '<i class="bi bi-pencil-square"></i>',
      '</a>',
      '<a class="delete me-2 text-danger" href="javascript:void(0)" title="刪除" target="_self">',
      '<i class="bi bi-file-earmark-x"></i>',
      '</a>'
    ].join('')
  }
  1. 調用

  $(function(){
    // 參數設定：https://examples.bootstrap-table.com/#options/table-ajax.html
    $("#table").bootstrapTable({
      classes: 'table table-sm table-striped table-bordered table-hover',   //表格樣式 table table-sm table-striped table-bordered table-hover
      toolbar: '#toolbar',                                                  //工具按鈕用哪個容器
      cache: false,                                                         //是否使用快取，預設為 true，所以一般情況下需要設定一下這個屬性（*）
      uniqueId:'',                                                          //哪一個欄位是key
      sortName:'',                                                          //依照那個欄位排序
      // height : 450,                                                        //高度 
      sortable: false,                                                      //是否啟用排序
      sortOrder:'',                                                         //asc
      sidePagination: "client",                                             //分頁方式：client 使用者端分頁，server 伺服器端分頁（*）
      theadClasses: 'table-light',                                          //標題列樣式
      
      //可於ToolBar上顯示的按鈕
      buttonsClass: "primary",                                              //
      buttonsAlign: "left",                                                //left right
      showColumns : true,                                                   //顯示/隱藏哪些欄位
      showToggle : true,                                                    //名片式/table式切換
      showRefresh : false,                                                  //重新整理
      showPaginationSwitch : true,                                          //分頁/不分頁切換
      showFullscreen: true,                                                 //顯示全螢幕
      search : true,                                                        //查詢
      buttons : '',                                                         //返回主檔按鈕 
      // cardView: true,                                                    //是否顯示詳細檢視
      // detailView: true,                                                  //是否顯示父子表

      showExport: true,                                                     //是否顯示匯出
      exportDataType: 'basic',								                              //匯出資料型別，支援：'基本'，'全部'，'選中'
      exportTypes:['json', 'csv', 'excel', 'xlsx', 'png'],                         //匯出型別

      pagination : true,                                                     //使否要分頁
      pageNumber:1,                                                          //初始化載入第一頁，預設第一頁
      onPageChange:function(currentPage, pageSize) {
        //console.log("目前頁數: "+currentPage+" ,一頁顯示: "+pageSize+" 筆");        
      },
      pageSize : 20,                                                         //一頁顯示幾筆
      pageList : "[ 20, 50, 100, all]",                                      //一頁顯示幾筆的選項
      formatRecordsPerPage:function(pageSize) {
        return '  每頁顯示 ' + pageSize + ' 筆';
      },
      formatShowingRows:function(fromIndex, toIndex, totalSize) {
        //目前第幾頁
        var currentPage = Math.ceil(fromIndex / this.pageSize);
        //總共幾頁
        var totalPageCount = Math.ceil(totalSize / this.pageSize);
        return currentPage+' / '+totalPageCount;
      }

    });
  })
  1. custom.html
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/locale/bootstrap-table-zh-TW.min.js"></script>


<!--bootstrap-table-export-->
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/extensions/export/bootstrap-table-export.min.js"></script>
<!--在客户端保存生成的导出文件-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/export/libs/FileSaver.js/FileSaver.min.js"></script>
<!--以XLSX（Excel 2007+ XML格式）格式导出表（SheetJS）-->
<script src="	https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.6/xlsx.core.min.js"></script>
<!--以PNG格式导出表格-->
<!--对于IE支持包括 html2canvas 之前的 es6-promise-->
<script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<!--无论期望的格式如何，最后都包含 tableexport.jquery.plugin（不是tableexport）-->
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>

<!-- 流水號	客戶名稱	客戶電話	客戶地址	備註 -->
<div id="toolbar"></div>
<table id="table">
  <thead>
    <tr>
      <? for(let i in stru){ ?>
        <th
          data-field='<?= stru[i]['title']?>'
          data-sortable='true'
          data-align='left'
          data-width=''
          data-visible='true'        
        >
          <?= stru[i]['title']?>
        </th>
      <? } ?>
      
      <th 
        data-field='operate' 
        data-sortable='false' 
        data-align='center' 
        data-width='150'
        data-clickToSelect='false' 
        data-events='window.operateEvents' 
        data-formatter='operateFormatter'>
        <a href="<?= global['url'] ?>?op=form_custom" class="" title='新增'>
          <i class="bi bi-file-earmark-plus"></i>
        </a>
      </th>
    </tr>
  </thead>
  <tbody>
    <!-- 1	育將電腦	123456789	台南市永康區大灣路158號	備註1 -->
    <? for(let i in rows){ ?>
      <tr>
        <? for(let j in rows[i]){?>
          <td><?= rows[i][j] ?></td>
        <? } ?>
        <td></td>
      </tr>
    <? } ?>
  </tbody>
</table>

<script>
  
  window.operateEvents = {
    'click .show': function (e, value, row, index) {//顯示單筆
      alert('查詢');//         
    },
    'click .edit': function (e, value, row, index) {
      top.location.href='<?= global.url ?>?op=form_custom&&sn='+row[0]
    },
    'click .delete': function (e, value, row, index) {
      alert('刪除');      
    }
  } 

  function operateFormatter(value, row, index) {
    console.log(row)
    return [
      '<a class="show me-2" href="javascript:void(0)" title="查詢" target="_self">',
      '<i class="bi bi-search"></i>',
      '</a>',
      '<a class="edit me-2" href="javascript:void(0)" title="編輯" target="_self">',
      '<i class="bi bi-pencil-square"></i>',
      '</a>',
      '<a class="delete me-2 text-danger" href="javascript:void(0)" title="刪除" target="_self">',
      '<i class="bi bi-file-earmark-x"></i>',
      '</a>'
    ].join('')
  }

  $(function(){
    // 參數設定：https://examples.bootstrap-table.com/#options/table-ajax.html
    $("#table").bootstrapTable({
      classes: 'table table-sm table-striped table-bordered table-hover',   //表格樣式 table table-sm table-striped table-bordered table-hover
      toolbar: '#toolbar',                                                  //工具按鈕用哪個容器
      cache: false,                                                         //是否使用快取，預設為 true，所以一般情況下需要設定一下這個屬性（*）
      uniqueId:'',                                                          //哪一個欄位是key
      sortName:'',                                                          //依照那個欄位排序
      // height : 450,                                                        //高度 
      sortable: false,                                                      //是否啟用排序
      sortOrder:'',                                                         //asc
      sidePagination: "client",                                             //分頁方式：client 使用者端分頁，server 伺服器端分頁（*）
      theadClasses: 'table-light',                                          //標題列樣式
      
      //可於ToolBar上顯示的按鈕
      buttonsClass: "primary",                                              //
      buttonsAlign: "left",                                                //left right
      showColumns : true,                                                   //顯示/隱藏哪些欄位
      showToggle : true,                                                    //名片式/table式切換
      showRefresh : false,                                                  //重新整理
      showPaginationSwitch : true,                                          //分頁/不分頁切換
      showFullscreen: true,                                                 //顯示全螢幕
      search : true,                                                        //查詢
      buttons : '',                                                         //返回主檔按鈕 
      // cardView: true,                                                    //是否顯示詳細檢視
      // detailView: true,                                                  //是否顯示父子表

      showExport: true,                                                     //是否顯示匯出
      exportDataType: 'basic',								                              //匯出資料型別，支援：'基本'，'全部'，'選中'
      exportTypes:['json', 'csv', 'excel', 'xlsx', 'png'],                         //匯出型別

      pagination : true,                                                     //使否要分頁
      pageNumber:1,                                                          //初始化載入第一頁，預設第一頁
      onPageChange:function(currentPage, pageSize) {
        //console.log("目前頁數: "+currentPage+" ,一頁顯示: "+pageSize+" 筆");        
      },
      pageSize : 20,                                                         //一頁顯示幾筆
      pageList : "[ 20, 50, 100, all]",                                      //一頁顯示幾筆的選項
      formatRecordsPerPage:function(pageSize) {
        return '  每頁顯示 ' + pageSize + ' 筆';
      },
      formatShowingRows:function(fromIndex, toIndex, totalSize) {
        //目前第幾頁
        var currentPage = Math.ceil(fromIndex / this.pageSize);
        //總共幾頁
        var totalPageCount = Math.ceil(totalSize / this.pageSize);
        return currentPage+' / '+totalPageCount;
      }

    });
  })
</script>

上一篇
Bootstrap Table(一)
下一篇
表單頁面(一)
系列文
Google Apps Script 整合運用 共 30 篇
  1. 26
    Google日曆通知
  2. 27
    日期套件
  3. 28
    網頁編輯器
  4. 29
    寄信功能
  5. 30
    除錯畫面
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22203 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙